<template>
  <div class="app-container">
    <div v-if="user">
      <el-row :gutter="20">

        <el-col :span="6" :xs="24">
          <user-card :user="user" />
        </el-col>

        <el-col :span="18" :xs="24">
          <el-card>
            <el-tabs v-model="activeTab">
              <el-tab-pane label="消息动态" name="activity">
                <activity />
              </el-tab-pane>
              <el-tab-pane label="个人简历" name="timeline">
                <Timeline @edit="handleEdit" />
              </el-tab-pane>
              <el-tab-pane label="账户信息" name="account">
                <el-form  ref="userForm" v-model="userForm" :model="userForm" :rules="rules" style="width: 500px">
                  <el-form-item label="用户名" prop="username">
                    <el-input v-model.trim="userForm.username" disabled  style="width: 500px"/>
                  </el-form-item>
                  <el-form-item label="昵称" prop="name" >
                    <br>
                    <el-input v-model.trim="userForm.name" style="width: 400px"/>
                    <el-button type="primary" @click="submitUserForm('nickName')" style="width: 100px">修改昵称</el-button>
                  </el-form-item>
                  <el-form-item label="密码" prop="password">
                    <br>
                    <el-input v-model.trim="userForm.password" style="width: 400px"/>
                    <el-button type="primary" @click="submitUserForm('password')" style="width: 100px">修改密码</el-button>
                  </el-form-item>
                </el-form>
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>

      </el-row>
    </div>
    <el-dialog title="编辑简历" :visible.sync="isEditMode" style="padding: 0">
      <div class="text-primary" style="font-weight: bold;margin:10px 35px;">基本信息</div>
      <el-form ref="resumeForm1" :model="resumeTemp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
        <el-form-item label="姓名" prop="name">
          <el-input v-model.trim="resumeTemp.name" />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-select v-model="resumeTemp.gender" placeholder="性别">
            <el-option label="男" value="男" />
            <el-option label="女" value="女" />
          </el-select>
        </el-form-item>
        <el-form-item label="出生年月" prop="birthday">
          <el-date-picker
            v-model="resumeTemp.birthday"
            type="date"
            placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item label="学历" prop="education">
          <el-select v-model="resumeTemp.education" placeholder="学历程度">
            <el-option label="中学" value="中学" />
            <el-option label="高中" value="高中" />
            <el-option label="本科" value="本科" />
            <el-option label="硕士" value="硕士" />
            <el-option label="博士" value="博士" />
          </el-select>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model.trim="resumeTemp.phone" />
        </el-form-item>
        <el-form-item label="邮箱" prop="mail">
          <el-input v-model.trim="resumeTemp.mail" />
        </el-form-item>
        <el-form-item label="住址" prop="address">
          <el-input v-model.trim="resumeTemp.address" />
        </el-form-item>
      </el-form>
      <div class="text-primary" style="font-weight: bold;margin:10px 35px;">教育背景 <span class="el-icon-circle-plus-outline clickable" @click="addItem('edu')"></span></div>
      <el-form v-for="(item, index) in resumeTemp.eduBackgrounds" :key="'edu' +index" :ref="'resumeForm-edu-'+ index" :model="item" class="form" label-position="left" label-width="70px">
        <div class="closer el-icon-circle-close" @click="removeItem(index,'edu')"></div>
        <el-form-item label="就读学校" prop="gender">
          <el-input v-model.trim="item.school" />
        </el-form-item>
        <el-form-item label="学习时间" prop="timeSpan">
          <el-date-picker
            v-model="item.timeSpan"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item label="学习经过" prop="description">
          <el-input v-model="item.intro" type="textarea" style="width: 500px" :autosize="{ minRows: 3, maxRows: 4}"/>
        </el-form-item>
      </el-form>
      <div class="text-primary" style="font-weight: bold;margin:10px 35px;">实习经历 <span class="el-icon-circle-plus-outline clickable" @click="addItem('practice')"></span></div>
      <el-form v-for="(item, index) in resumeTemp.practices" :key="'practice' + index" :ref="'resumeForm-practice-'+ index" :model="item" class="form" label-position="left" label-width="70px">
        <div class="closer el-icon-circle-close" @click="removeItem(index,'practice')"></div>
        <el-form-item label="实习公司" prop="gender">
          <el-input v-model.trim="item.name" />
        </el-form-item>
        <el-form-item label="担任职位" prop="gender">
          <el-input v-model.trim="item.position" />
        </el-form-item>
        <el-form-item label="实习时间" prop="timeSpan">
          <el-date-picker
            v-model="item.timeSpan"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item label="实习经过" prop="description">
          <el-input v-model="item.intro" type="textarea" style="width: 500px" :autosize="{ minRows: 3, maxRows: 4}"/>
        </el-form-item>
      </el-form>
      <div class="text-primary" style="font-weight: bold;margin:10px 35px;">项目经历 <span class="el-icon-circle-plus-outline clickable" @click="addItem('project')"></span></div>
      <el-form v-for="(item, index) in resumeTemp.projects" :key="index" :ref="'resumeForm-project-'+ index" :model="item" class="form" label-position="left" label-width="70px">
        <div class="closer el-icon-circle-close" @click="removeItem(index, 'project')"></div>
        <el-form-item label="项目名称" prop="name">
          <el-input v-model.trim="item.name" />
        </el-form-item>
        <el-form-item label="实用技术" prop="tech">
          <el-input v-model.trim="item.tech" />
        </el-form-item>
        <el-form-item label="仓库地址" prop="url">
          <el-input v-model.trim="item.url"  style="width: 350px"/>
        </el-form-item>
        <el-form-item label="学习经过" prop="description">
          <el-input v-model="item.intro" type="textarea" style="width: 500px" :autosize="{ minRows: 3, maxRows: 4}" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isEditMode = false">
          取消
        </el-button>
        <el-button type="primary" @click="submitResumeForm">
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { resetPassword, getDetail, updateUserBasicInfo } from '@/api/user'
import { updateResume } from '@/api/resume'
import { parseTime } from '@/utils'
import UserCard from './components/UserCard'
import Activity from './components/Activity'
import Timeline from './components/Timeline'
import Account from './components/Account'

export default {
  name: 'Profile',
  components: { UserCard, Activity, Timeline, Account },
  data() {
    return {
      isEditMode: false,
      resumeTemp: {
        name: '',
        birthday: '',
        gender: '',
        education: '',
        address: '',
        phone: '',
        mail: '',
        img: '',
        eduBackgrounds: [
          {
            timeSpan: '2018.07-至今',
            school: '广东药科大学',
            major: '计算机科学与技术（外包特色）',
            description: '计算机导论，计算机组成原理，计算机操作系统原理，C 语言程序设计，java 核心技术，数据库原理概论，高等数学，概率论与数理统计，离散数学'
          }
        ],
        practiceExperience: [
          {
            timeSpan: '2018.07-至今',
            com: '广东省葆康有限公司',
            position: '前端开发',
            description: '基于公司需求完成各种前端开发任务包括葆康网小程序，葆康网管理系统，葆康教学平台涉及html,javascript,css,scss,vue等语言，使用animate.css,vant,colorui,u-chart,element,element-admin等框架进行开发'
          }
        ],
        projectExperience: [
          {
            name: 'RPGGame',
            tech: 'qt框架，c++',
            url: 'https://github.com/idlemask/RPGGame',
            description: '基于公司需求完成各种前端开发任务包括葆康网小程序，葆康网管理系统，葆康教学平台涉及html,javascript,css,scss,vue等语言，使用animate.css,vant,colorui,u-chart,element,element-admin等框架进行开发'
          }
        ]
      },
      user: {},
      userForm: {
        id: '',
        username: '',
        name: '',
        password: ''
      },
      rules: {
        name: [
          { min: 0, max: 15, message: '15 个字符以内', trigger: 'blur', required: true }
        ],
        password: [
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur',required: true }
        ]
      },
      activeTab: 'activity'
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'avatar',
      'roles'
    ])
  },
  created() {
    this.getUser()
  },
  methods: {
    handleEdit(resume) {
      this.isEditMode = true
      this.resumeTemp = Object.assign({}, resume.resume)
    },
    addItem(type) {
      if (type === 'edu') {
        this.resumeTemp.eduBackgrounds.push(
          {
            timeSpan: '',
            school: '',
            major: '',
            description: ''
          }
        )
      } else if (type === 'practice') {
        this.resumeTemp.practices.push(
          {
            timeSpan: '',
            com: '',
            position: '',
            description: ''
          }
        )
      } else {
        this.resumeTemp.projects.push(
          {
            name: '',
            tech: '',
            url: '',
            description: ''
          }
        )
      }
    },
    removeItem(index, type) {
      if (type === 'edu') {
        this.resumeTemp.eduBackgrounds.splice(index)
      } else if (type === 'practice') {
        this.resumeTemp.practiceExperience.splice(index)
      } else {
        this.resumeTemp.projectExperience.splice(index)
      }
    },
    getUser() {
      getDetail(this.$store.getters.id).then(
        res => {
          this.user = res.data.items
          for (const i in this.userForm) {
            this.userForm[i] = res.data.items[i]
          }
          this.userForm.password = ''
        }
      )
    },
    submitUserForm() {
      this.$refs['userForm'].validate((valid) => {
        if (valid) {
          resetPassword(this.userForm).then(
            res => {
              console.log(res)
              if (res.status === 200) {
                this.$message({
                  message: '修改用户密码',
                  type: 'success',
                  duration: 1000
                })
              }
            }
          )
          if (this.userForm.name !== this.user.name) {
            updateUserBasicInfo(this.userForm).then(
              res => {
                if (res.status === 200) {
                  this.$message({
                    message: '修改用户信息成功',
                    type: 'success',
                    duration: 1000
                  })
                }
              }
            )
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    submitResumeForm() {
      const form = Object.assign({}, this.resumeTemp)
      form.birthday = parseTime(form.birthday, '{y}-{m}-{d} {h}:{i}:{s}')
      for (const i in form.eduBackgrounds) {
        form.eduBackgrounds[i].startTime = parseTime(form.eduBackgrounds[i].timeSpan[0], '{y}-{m}-{d} {h}:{i}:{s}')
        form.eduBackgrounds[i].endTime = parseTime(form.eduBackgrounds[i].timeSpan[1], '{y}-{m}-{d} {h}:{i}:{s}')
      }
      for (const i in form.practices) {
        form.practices[i].startTime = parseTime(form.practices[i].timeSpan[0], '{y}-{m}-{d} {h}:{i}:{s}')
        form.practices[i].endTime = parseTime(form.practices[i].timeSpan[1], '{y}-{m}-{d} {h}:{i}:{s}')
      }
      updateResume(form).then(
        res => {
          if (res.status === 200) {
            this.$message({
              message: '修改成功',
              type: 'success',
              duration: 5 * 1000
            })
            this.isEditMode = false
          }
        }
      )
    }
  }
}
</script>
<style lang="scss" scoped>
.el-dialog__body{
  padding: 0;
}
.form{
  width: calc(90% - 70px);
  padding: 20px;
  margin:20px 20px 20px 50px;
  border: 1px solid #AAAAAA;
  border-radius: 10px;
  .el-form-item{
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .closer{
    position: relative;
    float: right;
    right: -26px;
    top: -26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    line-height: 15px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #F56C6C;
    color: white;
    cursor: pointer;
    &:hover{
      background-color: #cb6262;
    }
    &:active{
      background-color: #ac5c5c;
    }
  }
}
.clickable{
  cursor: pointer;
  &:hover {
    color: #0d7251;
  }
  &:active {
    color: #66f1c5;
  }
}
</style>
